<template>
  <div class="message-management-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">消息管理</h1>
      <p class="page-description">管理来自快递员、商家和用户的所有消息</p>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <el-card class="filter-card shadow-effect">
        <div class="filter-form">
          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="消息类型">
              <el-select v-model="filterForm.messageType" placeholder="请选择消息类型">
                <el-option label="全部" value=""></el-option>
                <el-option label="投诉" value="complaint"></el-option>
                <el-option label="建议" value="suggestion"></el-option>
                <el-option label="咨询" value="inquiry"></el-option>
                <el-option label="反馈" value="feedback"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="发送者类型">
              <el-select v-model="filterForm.senderType" placeholder="请选择发送者类型">
                <el-option label="全部" value=""></el-option>
                <el-option label="快递员" value="courier"></el-option>
                <el-option label="商家" value="merchant"></el-option>
                <el-option label="用户" value="user"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="filterForm.status" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="未读" value="unread"></el-option>
                <el-option label="已读" value="read"></el-option>
                <el-option label="处理中" value="processing"></el-option>
                <el-option label="已解决" value="resolved"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <!-- 消息列表 -->
    <div class="message-list-container">
      <el-card class="message-list-card shadow-effect">
        <div class="card-header">
          <h3 class="card-title">消息列表</h3>
          <div class="search-box">
            <el-input
              v-model="searchKey"
              placeholder="搜索消息标题或内容"
              clearable
              @keyup.enter="handleSearch">
              <template #append>
                <el-button icon="el-icon-search" @click="handleSearch"></el-button>
              </template>
            </el-input>
          </div>
        </div>

        <div class="message-cards">
          <div
            v-for="(message, index) in messageList"
            :key="message.message_id"
            class="message-card shadow-effect"
            :class="{ 'unread-card': message.status === 'unread' }"
            @click="handleRowClick(message)">
            <div class="card-content">
              <div class="card-header-info">
                <el-tag
                  :type="getMessageTypeTagType(message.message_type)"
                  class="message-type-tag">
                  {{ getMessageTypeText(message.message_type) }}
                </el-tag>
                <div class="sender-info">
                  <i :class="getSenderTypeIcon(message.sender_type)"></i>
                  <span class="ml-2">{{ getSenderTypeText(message.sender_type) }}</span>
                </div>
              </div>

              <h4 class="card-title">{{ message.title }}</h4>
              <p class="card-content-preview">{{ message.content.length > 80 ? message.content.slice(0, 80) + '...' : message.content }}</p>

              <div class="card-footer">
                <div class="status-tag-container">
                  <el-tag
                    :type="getStatusTagType(message.status)"
                    class="status-tag">
                    {{ getStatusText(message.status) }}
                  </el-tag>
                </div>
                <span class="card-time">{{ formatDate(message.created_at) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 消息详情对话框 -->
    <el-dialog
      title="消息详情"
      :visible.sync="detailDialogVisible"
      width="700px"
      before-close="handleDetailClose"
      class="detail-dialog"
      :modal="false">
      <template #header>
        <span class="dialog-title">{{ currentMessage.title }}</span>
      </template>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button v-if="currentMessage.status !== 'resolved'" type="primary" @click="handleReply(currentMessage)">回复</el-button>
      </template>
      <div class="message-detail">
        <div class="detail-header">
          <h3 class="detail-title">{{ currentMessage.title }}</h3>
          <div class="detail-info">
            <div class="sender-info">
              <i :class="getSenderTypeIcon(currentMessage.sender_type)"></i>
              <span>{{ getSenderTypeText(currentMessage.sender_type) }}</span>
            </div>
            <span class="ml-4">{{ formatDate(currentMessage.created_at) }}</span>
          </div>
        </div>

        <div class="detail-content">
          <h4 class="content-title">消息内容</h4>
          <p class="content-text" v-if="currentMessage.content">
            {{ currentMessage.content }}
          </p>
          <p class="empty-tip" v-else>暂无消息内容</p>

          <div v-if="currentMessage.attachment" class="attachment">
            <h4 class="attachment-title">附件</h4>
            <a :href="currentMessage.attachment" target="_blank" class="attachment-link">
              <i class="el-icon-paperclip mr-2"></i>查看附件
            </a>
          </div>
        </div>

        <div v-if="currentMessage.reply_content" class="detail-reply">
          <h4 class="reply-title">回复内容</h4>
          <div class="reply-content">
            <p class="reply-text">{{ currentMessage.reply_content }}</p>
            <div class="reply-meta">
              <span class="reply-author">{{ currentUser.name }}</span>
              <span class="ml-4">{{ formatDate(currentMessage.reply_time) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 回复对话框 -->
    <el-dialog
      title="回复消息"
      :visible.sync="replyDialogVisible"
      width="600px"
      :modal="false"
      :before-close="handleReplyClose"
      class="reply-dialog">
      <template #header>
        <span class="dialog-title">回复 - {{ currentMessage.title }}</span>
      </template>
      <template #footer>
        <el-button @click="replyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReply">提交回复</el-button>
      </template>
      <div class="reply-form">
        <div class="original-message">
          <h4 class="message-title">原始消息</h4>
          <div class="message-content">
            <p>{{ currentMessage.content || '暂无消息内容' }}</p>
            <div v-if="currentMessage.attachment" class="attachment-preview">
              <i class="el-icon-paperclip mr-2"></i>
              <a :href="currentMessage.attachment" target="_blank">查看附件</a>
            </div>
          </div>
        </div>

        <el-form :model="replyForm" label-width="80px">
          <el-form-item label="回复内容" prop="content">
            <el-input
              type="textarea"
              v-model="replyForm.content"
              placeholder="请输入回复内容"
              :rows="5"
              resize="vertical"
              :class="{ 'required-field': !replyForm.content }"></el-input>
          </el-form-item>

          <el-form-item label="处理状态" prop="status">
            <el-radio-group v-model="replyForm.status">
              <el-radio label="processing">处理中</el-radio>
              <el-radio label="resolved">已解决</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="紧急程度" prop="priority">
            <el-select v-model="replyForm.priority" placeholder="选择紧急程度">
              <el-option label="普通" value="normal"></el-option>
              <el-option label="重要" value="important"></el-option>
              <el-option label="紧急" value="urgent"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="抄送给" prop="cc">
            <el-input
              v-model="replyForm.cc"
              placeholder="多个邮箱用逗号分隔"
              style="width: 100%"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MessageManagement',
  data() {
    return {
      // 筛选表单
      filterForm: {
        messageType: '',
        senderType: '',
        status: '',
        dateRange: null
      },

      // 搜索关键词
      searchKey: '',

      // 分页信息
      currentPage: 1,
      pageSize: 10,
      total: 0,

      // 消息列表
      messageList: [],

      // 当前查看的消息
      currentMessage: {},

      // 对话框状态
      detailDialogVisible: false,
      replyDialogVisible: false,

      // 回复表单
      replyForm: {
        content: '',
        status: 'processing',
        priority: 'normal',
        cc: ''
      },

      // 当前用户信息
      currentUser: {
        name: '系统管理员',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      }
    };
  },

  created() {
    // 初始化数据
    this.fetchMessageList();
  },

  methods: {
    // 获取消息列表
    fetchMessageList() {
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据
        const mockData = [
          {
            message_id: 1,
            company_id: 1,
            sender_type: 'user',
            sender_id: 1,
            message_type: 'complaint',
            title: '快递员服务态度恶劣',
            content: '今天上午来取件的快递员态度非常不好，希望公司处理。',
            attachment: null,
            status: 'resolved',
            reply_content: '已对该快递员进行批评教育，感谢您的反馈。',
            reply_time: '2023-01-02 10:30:00',
            is_anonymous: 0,
            created_at: '2023-01-01 15:20:00',
            updated_at: '2023-01-02 10:30:00'
          },
          {
            message_id: 2,
            company_id: 1,
            sender_type: 'merchant',
            sender_id: 1,
            message_type: 'inquiry',
            title: '如何提高配送时效',
            content: '我们店铺最近订单量增加，希望了解如何提高配送时效。',
            attachment: null,
            status: 'resolved',
            reply_content: '您好，可以考虑增加配送时间段和快递员数量，我们可以提供相关支持。',
            reply_time: '2023-01-05 16:45:00',
            is_anonymous: 0,
            created_at: '2023-01-03 09:15:00',
            updated_at: '2023-01-05 16:45:00'
          },
          {
            message_id: 3,
            company_id: 2,
            sender_type: 'courier',
            sender_id: 1,
            message_type: 'suggestion',
            title: '建议增加扫描设备',
            content: '现在的扫描设备效率较低，建议更换为更先进的型号。',
            attachment: null,
            status: 'processing',
            reply_content: '您的建议已收到，正在评估中。',
            reply_time: '2023-01-07 11:20:00',
            is_anonymous: 0,
            created_at: '2023-01-06 14:30:00',
            updated_at: '2023-01-07 11:20:00'
          },
          {
            message_id: 4,
            company_id: 2,
            sender_type: 'user',
            sender_id: 2,
            message_type: 'feedback',
            title: 'APP使用体验',
            content: 'APP界面简洁，使用方便，但希望增加订单跟踪的实时提醒功能。',
            attachment: null,
            status: 'read',
            reply_content: null,
            reply_time: null,
            is_anonymous: 0,
            created_at: '2023-01-08 10:10:00',
            updated_at: '2023-01-08 14:20:00'
          },
          {
            message_id: 5,
            company_id: 3,
            sender_type: 'merchant',
            sender_id: 2,
            message_type: 'complaint',
            title: '包裹丢失赔偿问题',
            content: '上个月有一个包裹丢失，希望了解赔偿流程。',
            attachment: null,
            status: 'unread',
            reply_content: null,
            reply_time: null,
            is_anonymous: 0,
            created_at: '2023-01-09 16:30:00',
            updated_at: '2023-01-09 16:30:00'
          },
          {
            message_id: 6,
            company_id: 3,
            sender_type: 'courier',
            sender_id: 2,
            message_type: 'feedback',
            title: '冬季保暖装备',
            content: '冬季天气寒冷，希望公司提供更好的保暖装备。',
            attachment: null,
            status: 'processing',
            reply_content: '已安排采购冬季保暖装备，预计下周发放。',
            reply_time: '2023-01-11 15:45:00',
            is_anonymous: 0,
            created_at: '2023-01-10 09:20:00',
            updated_at: '2023-01-11 15:45:00'
          },
          {
            message_id: 7,
            company_id: 1,
            sender_type: 'user',
            sender_id: 3,
            message_type: 'inquiry',
            title: '如何更改收货地址',
            content: '已经下单，但想更改收货地址，请问如何操作？',
            attachment: null,
            status: 'resolved',
            reply_content: '您好，可以在APP中找到订单详情，点击修改收货地址即可。',
            reply_time: '2023-01-13 11:10:00',
            is_anonymous: 0,
            created_at: '2023-01-12 14:50:00',
            updated_at: '2023-01-13 11:10:00'
          },
          {
            message_id: 8,            company_id: 1,
            sender_type: 'merchant',
            sender_id: 3,
            message_type: 'suggestion',
            title: '批量打印面单功能',
            content: '希望增加批量打印面单的功能，提高工作效率。',
            attachment: null,
            status: 'read',
            reply_content: null,
            reply_time: null,
            is_anonymous: 0,
            created_at: '2023-01-14 10:40:00',
            updated_at: '2023-01-14 15:30:00'
          },
          {
            message_id: 9,
            company_id: 2,
            sender_type: 'courier',
            sender_id: 3,
            message_type: 'complaint',
            title: '车辆维修不及时',
            content: '我负责的配送车辆故障，维修不及时，影响工作效率。',
            attachment: null,
            status: 'processing',
            reply_content: '已安排尽快维修，给您带来不便，敬请谅解。',
            reply_time: '2023-01-16 14:20:00',
            is_anonymous: 0,
            created_at: '2023-01-15 09:30:00',
            updated_at: '2023-01-16 14:20:00'
          },
          {
            message_id: 10,
            company_id: 2,
            sender_type: 'user',
            sender_id: 4,
            message_type: 'feedback',
            title: '配送速度快',
            content: '今天收到的包裹配送速度非常快，快递员态度也很好，表扬一下！',
            attachment: null,
            status: 'read',
            reply_content: null,
            reply_time: null,
            is_anonymous: 0,
            created_at: '2023-01-17 16:50:00',
            updated_at: '2023-01-17 17:10:00'
          }
        ];

        // 模拟筛选和分页
        let filteredData = mockData;

        // 应用筛选条件
        if (this.filterForm.messageType) {
          filteredData = filteredData.filter(item => item.message_type === this.filterForm.messageType);
        }

        if (this.filterForm.senderType) {
          filteredData = filteredData.filter(item => item.sender_type === this.filterForm.senderType);
        }

        if (this.filterForm.status) {
          filteredData = filteredData.filter(item => item.status === this.filterForm.status);
        }

        if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
          const [startDate, endDate] = this.filterForm.dateRange;
          filteredData = filteredData.filter(item => {
            const date = new Date(item.created_at);
            const start = new Date(startDate);
            const end = new Date(endDate);
            return date >= start && date <= end;
          });
        }

        // 应用搜索条件
        if (this.searchKey) {
          const key = this.searchKey.toLowerCase();
          filteredData = filteredData.filter(item =>
            item.title.toLowerCase().includes(key) ||
            item.content.toLowerCase().includes(key)
          );
        }

        // 更新总数
        this.total = filteredData.length;

        // 分页
        const startIndex = (this.currentPage - 1) * this.pageSize;
        this.messageList = filteredData.slice(startIndex, startIndex + this.pageSize);
      }, 300);
    },

    // 处理筛选
    handleFilter() {
      this.currentPage = 1;
      this.fetchMessageList();
    },

    // 重置筛选
    resetFilter() {
      this.filterForm = {
        messageType: '',
        senderType: '',
        status: '',
        dateRange: null
      };
      this.searchKey = '';
      this.currentPage = 1;
      this.fetchMessageList();
    },

    // 处理搜索
    handleSearch() {
      this.currentPage = 1;
      this.fetchMessageList();
    },

    // 处理分页大小变化
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.fetchMessageList();
    },

    // 处理页码变化
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchMessageList();
    },

    // 处理行点击
    handleRowClick(row) {
      this.currentMessage = { ...row };
      this.detailDialogVisible = true;

      // 如果是未读消息，更新状态为已读
      if (row.status === 'unread') {
        this.$set(row, 'status', 'read');
        // 这里应该有更新消息状态的API调用
      }
    },

    // 处理查看消息
    handleView(row, event) {
      event.stopPropagation();
      this.currentMessage = { ...row };
      this.detailDialogVisible = true;

      // 如果是未读消息，更新状态为已读
      if (row.status === 'unread') {
        this.$set(row, 'status', 'read');
        // 这里应该有更新消息状态的API调用
      }
    },

    // 处理回复消息
    handleReply(row, event) {
      event.stopPropagation();
      this.currentMessage = { ...row };
      this.replyForm = {
        content: '',
        status: row.status === 'unread' ? 'processing' : row.status,
        priority: 'normal',
        cc: ''
      };
      this.replyDialogVisible = true;
    },

    // 处理详情对话框关闭
    handleDetailClose(done) {
      done();
    },

    // 处理回复对话框关闭
    handleReplyClose(done) {
      this.$confirm('确定要取消回复吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        done();
      }).catch(() => {
        // 用户取消关闭
      });
    },

    // 提交回复
    submitReply() {
      // 表单验证
      if (!this.replyForm.content.trim()) {
        this.$message.error('回复内容不能为空');
        return;
      }

      // 显示加载状态
      const loading = this.$loading({
        lock: true,
        text: '提交中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });

      // 模拟API请求延迟
      setTimeout(() => {
        loading.close();

        // 更新当前消息状态
        this.$set(this.currentMessage, 'status', this.replyForm.status);
        this.$set(this.currentMessage, 'reply_content', this.replyForm.content);
        this.$set(this.currentMessage, 'reply_time', new Date().toISOString().slice(0, 19).replace('T', ' '));

        // 查找并更新消息列表中的对应项
        const index = this.messageList.findIndex(item => item.message_id === this.currentMessage.message_id);
        if (index !== -1) {
          this.$set(this.messageList, index, { ...this.currentMessage });
        }

        // 关闭对话框
        this.replyDialogVisible = false;

        // 显示成功消息
        this.$message({
          message: '回复提交成功',
          type: 'success',
          iconClass: 'el-icon-check',
          duration: 2000
        });
      }, 800);
    },

    // 格式化日期显示
    formatDate(dateString) {
      if (!dateString) return '';

      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },

    // 获取消息类型文本
    getMessageTypeText(type) {
      const types = {
        'complaint': '投诉',
        'suggestion': '建议',
        'inquiry': '咨询',
        'feedback': '反馈'
      };
      return types[type] || type;
    },

    // 获取消息类型标签样式
    getMessageTypeTagType(type) {
      const types = {
        'complaint': 'danger',
        'suggestion': 'success',
        'inquiry': 'primary',
        'feedback': 'info'
      };
      return types[type] || 'info';
    },

    // 获取发送者类型文本
    getSenderTypeText(type) {
      const types = {
        'courier': '快递员',
        'merchant': '商家',
        'user': '用户'
      };
      return types[type] || type;
    },

    // 获取发送者类型图标
    getSenderTypeIcon(type) {
      const icons = {
        'courier': 'el-icon-truck',
        'merchant': 'el-icon-shopping-cart-full',
        'user': 'el-icon-user'
      };
      return icons[type] || 'el-icon-question';
    },

    // 获取状态文本
    getStatusText(status) {
      const statuses = {
        'unread': '未读',
        'read': '已读',
        'processing': '处理中',
        'resolved': '已解决'
      };
      return statuses[status] || status;
    },

    // 获取状态标签样式
    getStatusTagType(status) {
      const statuses = {
        'unread': 'warning',
        'read': 'info',
        'processing': 'primary',
        'resolved': 'success'
      };
      return statuses[status] || 'info';
    }
  }
};
</script>

<style scoped>
/* 基础容器样式 */
.message-management-container {
  padding: 30px 15px;
  max-width: 1440px;
  margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
  margin-bottom: 30px;
  text-align: center;
  position: relative;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
  display: inline-block;
  padding-bottom: 8px;
  position: relative;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #409EFF;
  border-radius: 3px;
}

.page-description {
  color: #606266;
  font-size: 16px;
  line-height: 1.5;
}

/* 卡片阴影效果 */
.shadow-effect {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.shadow-effect:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 筛选区域样式 */
.filter-container {
  margin-bottom: 30px;
}

.filter-card {
  border-radius: 10px;
  overflow: hidden;
}

.filter-form {
  padding: 20px;
}

.el-form-item {
  margin-right: 20px;
  margin-bottom: 15px;
}

/* 消息列表卡片样式 */
.message-list-container {
  margin-bottom: 30px;
}

.message-list-card {
  border-radius: 10px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.search-box {
  width: 350px;
}

/* 消息卡片样式 */
.message-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 20px;
}

.message-card {
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
}

.message-card:hover {
  border-color: #c0ccda;
  transform: translateY(-3px);
}

.unread-card {
  border-left: 4px solid #ff9800;
}

.card-content {
  padding: 20px;
}

.card-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.message-type-tag {
  margin-right: 10px;
}

.sender-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.sender-info i {
  margin-right: 5px;
  font-size: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-content-preview {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #909399;
}

.status-tag-container {
  display: flex;
  gap: 8px;
}

.status-tag {
  font-size: 12px;
}

.card-time {
  white-space: nowrap;
}

/* 对话框样式 */
.detail-dialog, .reply-dialog {
  border-radius: 10px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.detail-dialog .el-dialog__header,
.reply-dialog .el-dialog__header {
  background-color: #f0f2f5;
  padding: 20px 30px;
  border-bottom: 1px solid #ebeef5;
}

.detail-dialog .el-dialog__title,
.reply-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
}

.detail-dialog .el-dialog__body,
.reply-dialog .el-dialog__body {
  padding: 30px;
}

.message-detail {
  padding: 0;
}

.detail-header {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.detail-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}

.detail-info {
  display: flex;
  color: #606266;
  font-size: 14px;
}

.detail-content {
  margin-bottom: 30px;
}

.content-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 15px;
}

.content-text {
  line-height: 1.7;
  color: #606266;
  white-space: pre-wrap;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.attachment {
  margin-top: 25px;
}

.attachment-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 15px;
}

.attachment-link {
  color: #409EFF;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.attachment-link:hover {
  text-decoration: underline;
}

.detail-reply {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.reply-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 15px;
}

.reply-content {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 6px;
  position: relative;
}

.reply-text {
  line-height: 1.7;
  color: #606266;
  white-space: pre-wrap;
  margin-bottom: 15px;
}

.reply-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #909399;
}

.reply-author {
  font-weight: 500;
  color: #409EFF;
}

/* 回复对话框样式 */
.reply-form {
  padding: 0;
}

.reply-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
}

.original-message {
  margin-bottom: 25px;
  padding: 15px;
  background-color: #f0f2f5;
  border-radius: 6px;
}

.message-title {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 10px;
}

.message-content {
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
}

.attachment-preview {
  margin-top: 10px;
  color: #409EFF;
}

.required-field {
  border-color: #f56c6c !important;
}

.required-field:focus {
  border-color: #f56c6c !important;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2) !important;
}

/* 分页样式 */
.pagination-container {
  padding: 20px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .message-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .message-management-container {
    padding: 20px 10px;
  }

  .page-title {
    font-size: 24px;
  }

  .message-cards {
    grid-template-columns: 1fr;
  }

  .filter-form {
    flex-direction: column;
    align-items: flex-start;
  }

  .el-form-item {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
  }
}
</style>
